<template>
	<view class="container">
		<!-- 订单提交完成后对公打款账户信息展示 -->
		<view class="AccountInfo" v-if="true">
			<!-- 顶部状态 -->
			<view class="orderStatus">
				<view class="infoText">
					<view class="iconContent">

					</view>
					<view class="textContent">
						订单已提交完成
					</view>

				</view>
				<view class="checkOrderInfo" @click="toserviceOrderPage(1)">
					查看订单
				</view>

			</view>
			<!-- 下划线 -->
			<view class="subLine">

			</view>
			<!-- 订单打款和账户信息 -->
			<view class="dueFeeInfo">
				<view class="infoContent">
					<view class="feeTitle">
						<view class="text">
							应付款
						</view>
						<view class="fee">
							￥{{totalPrice}}
						</view>
					</view>
					<view class="descText">
						对公打款
					</view>
				</view>

			</view>

			<view class="accountInfo">
				<view class="infoTitle">
					线下账户信息
				</view>

				<view class="accountInfoDetail">
					<view class="accountName">
						<view class="text">
							户名
						</view>
						<view class="value">
							{{accountInfo.accountName}}
						</view>
					</view>

					<view class="accountNumber">
						<view class="text">
							账户
						</view>
						<view class="value">
							{{accountInfo.accountNumber}}
						</view>
					</view>

					<view class="accountBank">
						<view class="text">
							开户行
						</view>
						<view class="value">
							{{accountInfo.bankName}}
						</view>
					</view>
				</view>


				<view class="copyOperate" @click="toCopy()">
					复制信息
				</view>
			</view>


		</view>


		<!-- 上传对公打款凭证 -->
		<view class="uploadPayment" v-if="true">
			<!-- 第一行上传营业执照的部分 -->
			<view class="upload">
				<view class="uploadTitle">
					上传您的对公打款凭证信息
				</view>
				<view class="uploadOprate" @click="uploadLicense()">
					{{uploadStatus}}
				</view>
			</view>
			<!-- 下方的上传提示信息 -->
			<view class="hintInfo">
				<view class="iconContent">
					<uni-icons type="info-filled" size="18" color="rgba(167, 167, 167, 1)"></uni-icons>
				</view>
				<view class="textContent">
					<view class="text">
						请确保上传图片内容清晰
					</view>
					<view class="text">
						1-3三个工作日审核内完成
					</view>
				</view>
			</view>


		</view>

		<!-- 提交按钮 -->
		<view class="confirmBtn" @click="uploadConfirm()">
			提交
		</view>
	</view>
</template>

<script>
	import * as serviceStatusApi from '@/api/serviceStatus/serviceStatus.js'
	import * as serviceOrderApi from '@/api/serviceOrder/serviceOrder.js'
	export default {
		data() {
			return {
				uploadPayInfo: {
					serverUserOrdersId: null,
					serverUserOrdersPaymentVoucher: null
				},
				//需要复制的文本
				copyText: 'dddd',
				uploadStatus:'立即上传',
				totalPrice:null,
				//对公打款账户信息
				accountInfo: {
					accountName: '山东长百中医药科技有限公司',
					accountNumber: '209149470779',
					bankName: '中国银行股份有限公司青岛灵山湾路支行'
				}
				
				

			};
		},
		onLoad(options) {
			const paramsStr = options.params; // 获取URL查询参数中的params字段
			//接收订单页面传来的订单编号
			if (paramsStr) {
				const receivedParams = JSON.parse(paramsStr);
				
				// 将参数字符串解析为对象  
				this.uploadPayInfo.serverUserOrdersId =  receivedParams.serverUserOrders || null;
				this.totalPrice=receivedParams.totalPrice;
				
			}


		},
		methods: {
			//根据服务商类型进行打折
			caluateDiscount(price) {
				
				if (this.$globalData.userType !== null) {
					
					if (this.$globalData.userType === 1) {
						return (0.5 * price).toFixed(2)
					} else {
						
						return (0.4 * price).toFixed(2)
					}
				}
			},
			async uploadLicense() {
				
				// 上传对公打款凭证信息
				const url = await uni.$chooseImage();
				

				if (url != null) {
					this.uploadPayInfo.serverUserOrdersPaymentVoucher = url;
					this.uploadStatus='重新上传'
					return uni.$showMsg('上传成功')
					

				} else {
					return uni.$showMsg('上传失败,请重新选择图片')
				}




			},

			//最终点提交触发调用后端函数
			async uploadConfirm() {
				if (this.uploadPayInfo.serverUserOrdersPaymentVoucher != null) {
					const res = await  serviceOrderApi.submitPayment(this.uploadPayInfo)
					
					if (res.data.code === 200) {
						uni.hideLoading()
						uni.$showMsg('上传成功,待审核')
						uni.$toPage('/subpkg/ServiceProvider/replishOrderTransferPage/replishOrderTransferPage',{
							
						},false,false,true)
					} else {
						return uni.$showMsg('上传失败，请稍后重试')
					}
				} else {
					return uni.$showMsg('请先上传对公打款凭证')
				}

			},

			//跳到补货订单页面
			//根据传递的不同flag到不同的页面
			toserviceOrderPage(flag) {
				uni.$toPage('/subpkg/ServiceProvider/serviceOrderRecord/serviceOrderRecord', {
					flag: flag
				});

			},

			// 复制信息
			toCopy() {
				let copyText ='户名:'+this.accountInfo.accountName+'  账户:'+this.accountInfo.accountNumber+'  开户行:'+this.accountInfo.bankName;
				uni.$copyText(copyText);
			}

		}
	}
</script>


<style lang="scss" scoped>
	.container {
		background-color: rgba(235, 236, 237, 1);
		width: 100%;
		height: 100vh;
		padding-bottom: 300rpx;
		overflow: scroll;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;

		//账户信息
		.AccountInfo {
			box-sizing: border-box;
		
			width: 694rpx;
			// height: 494rpx;
			opacity: 1;
			background: rgba(249, 250, 252, 1);
			margin-top: 50rpx;
			position: relative;
			padding-bottom: 30rpx;
		
		
			// 顶部状态  
			.orderStatus {
		
				box-sizing: border-box;
				height: 114rpx;
		
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 50rpx;
		
		
		
				.infoText {
					display: flex;
					align-items: center;
		
		
					.iconContent {
						width: 30rpx;
						height: 30rpx;
						opacity: 1;
						background: url('/static/my/user_icon_success_default@2x.png.png');
						background-size: cover;
					}
		
					.textContent {
						font-weight: 700;
						margin-left: 20rpx;
						font-size: 32rpx;
						color: rgba(0, 0, 0, 1);
					}
		
		
				}
		
				.checkOrderInfo {
					font-size: 32rpx;
					color: rgba(223, 161, 60, 1);
					font-weight: 700;
				}
		
			}
		
		
			//底部线条
			.subLine {
				left: 50rpx;
				position: absolute;
				width: 594rpx;
				height: 0rpx;
				opacity: 1;
				border: 1rpx dashed rgba(0, 0, 0, 1);
		
			}
		
			// 订单打款和账户信息  
			.dueFeeInfo {
				
				position: relative;
				margin-top: 36rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40rpx;
		
				.reSelectGoods {
					margin-bottom: 30rpx;
					box-sizing: border-box;
					width: 144rpx;
					height: 56rpx;
					opacity: 1;
					border-radius: 20rpx;
					border: 2rpx solid rgba(0, 0, 0, 1);
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(0, 0, 0, 1);
					display: flex;
					justify-content: center;
					align-items: center;
		
		
				}
		
				.infoContent {
					.feeTitle {
						font-weight: 600;
						display: flex;
						align-items: center;
		
						.text {}
		
						.fee {
							margin-left: 16rpx;
						}
					}
		
					.descText {}
				}
		
		
			}
		
			// 账户  
			.accountInfo {
		         
				box-sizing: border-box;
				margin-top: 40rpx;
		
				padding: 0 40rpx;
				position: relative;
		
				.infoTitle {
					
					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 1);
					font-weight: 600;
		
				}
		
				.accountInfoDetail {
					width: 100%;
					
					display: flex;
					flex-direction: column;
					margin-top: 10rpx;
		
					.accountName {
						
						margin-top: 15rpx;
					
						display: flex;
						align-items: center;
						flex-direction: row;
						justify-content: space-between;
		
						.text {}
		
						.value {
							font-size: 28rpx;
							color: rgba(85, 85, 87, 1);
							
						}
					}
		
					.accountNumber {
						display: flex;
						align-items: center;
						flex-direction: row;
						justify-content: space-between;
						margin-top: 10rpx;
		
						.text {}
		
						.value {
							
							font-size: 28rpx;
							color: rgba(85, 85, 87, 1);
							
						}
					}
		
					.accountBank {
						
						margin-top: 10rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
		
						.text {}
		
						.value {
							padding-right: 0;
							width: 367rpx;
							font-size: 28rpx;
							color: rgba(85, 85, 87, 1);
						}
					}
				}
		
				//复制信息按钮
				.copyOperate {
					
					position: absolute;
					top: -20rpx;
					right: 35rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 144rpx;
					height: 58rpx;
					opacity: 1;
					border-radius: 20rpx;
					
					border: 2rpx solid rgba(0, 0, 0, 1);
				}
			}
		
		
		}
		

		// 上传对公打款凭证
		.uploadPayment {
			margin-top: 30rpx;

			width: 694rpx;
			height: 198rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);
			padding-bottom: 24rpx;

			.upload {
				box-sizing: border-box;
				padding: 0 50rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;


				.uploadTitle {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);

				}

				.uploadOprate {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 58rpx;
					opacity: 1;
					border-radius: 18rpx;
					background: rgba(223, 161, 60, 1);
				}
			}


			// 通用样式  
			.hintInfo {
				margin-top: 24rpx;

				display: flex;
				align-items: center;

			}

			.iconContent {
				margin-left: 29rpx;
				margin-right: 14rpx;
			}


			.textContent {

				.text {
					color: rgba(167, 167, 167, 1);
					font-size: 24rpx;
					line-height: 38rpx;
				}


			}






		}

		//提交按钮
		.confirmBtn {
			position: absolute;
			left: 176rpx;
			bottom: 90rpx;
			box-sizing: border-box;
			width: 400rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 26rpx;
			background: rgba(223, 161, 60, 1);
			font-size: 28rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
	}
</style>